

<script setup>
import { ref, watch } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
import {putPileAPI} from "@/apis/api_pile.js";
// 定义弹窗开关
const dialogVisible=ref(false);
//打开弹窗
const openDialog=(row)=>{
  dialogVisible.value=true;
}
//暴露出去供父组件使用
defineExpose({openDialog});

// 接收父组件传递的数据
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
});

const formData = ref({...props.data });
const emits=defineEmits(['save'])
/*
const saveChanges = () => {
  // 这里可以添加保存数据的逻辑，例如调用 API 进行数据更新
  console.log('保存的数据:', formData.value);
  axios.put('http://192.168.1.245:8080/pileData',formData.value)
  dialogVisible.value=false;
  // 通知父组件数据已保存，这里可以通过 emit 事件实现
  emits("save",formData.value);
};
*/

const saveChanges = () => {
  // 这里可以添加保存数据的逻辑，例如调用 API 进行数据更新
  console.log('保存的数据:', formData.value);
  putPileAPI(formData.value);
  dialogVisible.value=false;
  // 通知父组件数据已保存，这里可以通过 emit 事件实现
  emits("save",formData.value);
};

watch(() => props.data, (newData) => {
  formData.value = {...newData };
}, { deep: true });
</script>
<template>
  <el-dialog v-model="dialogVisible" title="编辑" width="60%">
    <el-form :model="formData" label-width="120px">
      <ul>
        <li> <el-form-item label="ID">
          <el-input v-model="formData.id" disabled></el-input>
        </el-form-item>
        </li>
        <li>
          <el-form-item label="桩基号">
            <el-input v-model="formData.pileNumber"></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="里程">
            <el-input v-model="formData.mileage" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="偏距">
            <el-input v-model="formData.offset" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="坐标X" >
            <el-input v-model="formData.coordinateX" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="坐标Y">
            <el-input v-model="formData.coordinateY" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="桩底高程">
            <el-input v-model="formData.pileBottomElevation" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="桩顶高程">
            <el-input v-model="formData.pileTopElevation" ></el-input>
          </el-form-item></li>
        <li> <el-form-item label="桩径">
          <el-input v-model="formData.pileDiameter" ></el-input>
        </el-form-item>
        </li>
        <li>
          <el-form-item label="桩长">
            <el-input v-model="formData.pileLength" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="钢筋笼长度">
            <el-input v-model="formData.steelCageLength" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="超灌长度">
            <el-input v-model="formData.overPouringLength" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="地面高程">
            <el-input v-model="formData.groundElevation" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="实际桩底高程">
            <el-input v-model="formData.actualPileBottomElevation" ></el-input>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="试块编号">
            <el-input v-model="formData.testBlockNumber"></el-input>
          </el-form-item></li>
        <li>
          <el-form-item label="开挖时间">
            <el-date-picker
                v-model="formData.excavationTime"
                type="datetime"
                placeholder="选择开挖时间"
            >
            </el-date-picker>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="开孔时间">
            <el-date-picker
                v-model="formData.holeOpeningTime"
                type="datetime"
                placeholder="选择开孔时间"
            >
            </el-date-picker>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="成孔时间">
            <el-date-picker
                v-model="formData.holeCompletionTime"
                type="datetime"
                placeholder="选择成孔时间"
            >
            </el-date-picker>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="下钢筋笼时间">
            <el-date-picker
                v-model="formData.reinforcementCageLoweringTime"
                type="datetime"
                placeholder="选择下钢筋笼时间"
            >
            </el-date-picker>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="下导管时间">
            <el-date-picker
                v-model="formData.conduitLoweringTime"
                type="datetime"
                placeholder="选择下导管时间"
            >
            </el-date-picker>
          </el-form-item>
        </li>
        <li>
          <el-form-item label="浇筑时间">
            <el-date-picker
                v-model="formData.pouringTime"
                type="datetime"
                placeholder="选择浇筑时间"
            >
            </el-date-picker>
          </el-form-item>
        </li>

        <li>
          <el-button @click="saveChanges">保存</el-button>
        </li>
      </ul>
    </el-form>
  </el-dialog>
</template>
<style scoped>
/* 可根据需要添加自定义样式 */
ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
}
li:last-child {
  margin-left: auto;
}
</style>